<template>
  <div class="search-results">
    <!--搜索结果-->
    <van-dropdown-menu>
      <van-dropdown-item title="综合" v-model="value1" :options="option1" disabled />
      <van-dropdown-item title="价格" v-model="priceVal" :options="option2" @change="priceChange" />
      <van-dropdown-item title="分类" v-model="categoryVal" :options="filterCategory" @change="categoryChange" />
    </van-dropdown-menu>
    <!--产品列表-->
    <Products v-if="goodsList.length" :goodsList="goodsList" />
    <van-empty v-else image="search" description="抱歉,没有内容" />
  </div>
</template>

<script>
// 加载列表组件
import Products from '../Products/Products.vue'
export default {
  name: 'SearchResults',
  components: {
    Products
  },
  data () {
    return {
      value1: 0, // 综合，禁止使用
      priceVal: 'asc', // asc表示低到高，desc表示高到低
      categoryVal: '', // 这个值表示是哪一项的value，就勾选哪一项
      option1: [
        { text: '默认排序', value: 0 },
        { text: '好评排序', value: 1 },
        { text: '销量排序', value: 2 }
      ],
      option2: [
        { text: '从低到高', value: 'asc' },
        { text: '从高到低', value: 'desc' }
      ]
    }
  },
  props: [
    'filterCategory',
    'goodsList'
  ],
  mounted () {
    // 数据加载完毕，遍历filterCategory数组，看看哪一项的checked为true
    // 遍历的时候，遇到checked为true时，就把this.categoryVal改成它的value值，这样这一项就被勾选了
    this.filterCategory.map(item => {
      // 如果item的checked为true，就改this.categoryVal
      if (item.checked) {
        this.categoryVal = item.value
      }
    })
  },
  methods: {
    // 分类排序方法
    categoryChange (value) {
      // 打印分类ID
      // console.log(value)
      this.$emit('categoryChange', value)
    },
    // 价格排序方法
    priceChange (value) {
      // 打印信息
      // console.log(value)
      this.$emit('priceChange', value)
    }
  }
}
</script>

<style lang="less" scoped>
.search-results{
  padding: 0;
}
</style>
